<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>OAuth in Action: OAuth Authorization Server</title>

    <!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<style>
	body {
	  padding-top: 60px;
	}
	.navbar-inverse {
		background-color: #322;
	}
	.client-logo {
		max-width: 40em;
		max-height: 10em;
	}
	</style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">OAuth in Action: <span class="label label-danger">OAuth Authorization Server</label></a>
        </div>
      </div>
    </nav>

    <div class="container">

      <div class="jumbotron">
		  <h2>Approve this client?</h2>
		  <% if (client.client_name) { %>
		  <p><b>Name:</b> <code><%- client.client_name %></code></p>
		  <% } %>
		  <p><b>ID:</b> <code><%- client.client_id %></code></p>
		  <% if (client.client_uri) { %>
		  <p><b>URI:</b> <code><%- client.client_uri %></code></p>
		  <% } %>
		  <% if (client.redirect_uris) { %>
		  <p><b>Redirect To:</b> <code><%- client.redirect_uris[0] %></code></p>
		  <% } %>
		  <% if (client.logo_uri) { %>
		  <p><b>logo:</b> <img class="client-logo" src="<%- client.logo_uri %>" /></p>
		  <% } %>
		  
		   <form class="form" action="/approve" method="POST">
<!--
			   <label>Select user:</label>
			   <select name="user">
			     <option value="alice">Alice</option>
			     <option value="bob">Bob</option>
			   </select>
-->
			   <input type="hidden" name="reqid" value="<%- reqid %>">
			   <% if (scope) { %>
			   <p>The client is requesting access to the following:</p>
			   <ul>
			   <% _.each(scope, function(s) { %>
			   	  <li><input type="checkbox" name="scope_<%- s %>" id="scope_<%- s %>" checked="checked"> <label for="scope_<%- s %>"><%- s %></label></li>
			   <% }); %>
		       </ul>
			   <% } %>
			   <input type="submit" class="btn btn-success" name="approve" value="Approve">
			   <input type="submit" class="btn btn-danger" name="deny" value="Deny">
		   </form>
      </div>

    </div><!-- /.container -->

	
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>
